<%@ page language="java" contentType="text/html" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>台风数据</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css"/>
    <link rel="stylesheet" href="${contextPath}/css/tyhoon.css">
    <script src="https://js.arcgis.com/4.14/"></script>

    <script src="${contextPath}/library/layui/layui.js"></script>
    <link rel="stylesheet" href="${contextPath}/library/layui/css/layui.css">
    <style type="text/css">
        .typhoonTitle {
            margin-top: 20px;
        }

        .buelStyle {
            line-height: 30px;
            margin: 10px 0px 0px 9px;
        }

        .buelStyle span {
            background: #21569E;
        }

        .listDiv {
            max-height: 450px;
            overflow-y: auto;
        }

        .bigDiv {
            overflow-y: hidden;
        }

        .forDiv {
            width: 350px;
            height: 255px;
            background: #FFFFFF;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            border-radius: 5px;
        }

        .forDivSpan {
            height: 40px;
            padding: 0 10px;
            line-height: 40px;
        }

        .forDiv table {
            border-collapse: separate;
            border-spacing: 0px;
            width: 90%;
            margin-left: 5%;
            text-align: center;
            height: 80%;
        }

        .forDiv td {
            border: 1px solid grey;
        }

        .buleDIV {
            width: 8px;
            height: 15px;
            background: #21569E;
            float: left;
            margin: 12px 6px 0px 8px;
        }

        .buleTitle {
            float: left;
        }

        .buleTitle span {
            color: #3765bb;
        }

        .ulTable {
            margin-left: 20px;
            text-align: left;
            width: calc(100% - 20px);
        }
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body >
<div id="viewDiv" v-cloak></div>
<div id="coverageItem" class="typhon_layer bigDiv" v-cloak>
    <form id="greenTidTool" class="layui-form" action="" lay-filter="tucheng">
        <%--<ul class="ulTable">  </ul>--%>
        <div class="buelStyle"><span class="buelStyle">&nbsp;</span>&nbsp;台风列表</div>
        <hr>
        <div class="listDiv">
            <ul id="ulTable" class="ulTable">
            </ul>
        </div>
    </form>
</div>

<div id="forecastDiv" class="forDiv" v-cloak>
    <div class="forDivSpan">
        <div class="buleDIV"></div>
        <div class="buleTitle">名称: <span id="for_title"></span>编号:<span id="for_number"></span></div>
    </div>
    <table>
        <tr>
            <td colspan="2">实时状况<br/> <span id="for_time"></span></td>
            <td colspan="2">预报信息</td>
        </tr>

        <tr>
            <td>时效</td>
            <td>实况</td>
            <td>24小时</td>
            <td>48小时</td>
        </tr>
        <tr>
            <td>经度</td>
            <td id="for_lon"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>纬度</td>
            <td id="for_lat"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>中心气压</td>
            <td id="for_qy"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>最大风速</td>
            <td id="for_fs"></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>
</body>
<script>


    layui.use(['laydate', 'element', 'layer', 'table', 'form'], function () {
        var $ = layui.jquery, element = layui.element;
        laydate = layui.laydate;
        layer = layui.layer;
        form = layui.form;

        require([
            "esri/Map",
            "esri/PopupTemplate",
            "esri/views/MapView",
            "esri/Graphic",
            "esri/geometry/Point",
            "esri/layers/FeatureLayer",
            "esri/layers/support/Field"
        ], function (Map, PopupTemplate, MapView, Graphic, Point, FeatureLayer, Field) {
            var jsonArray = [
                [-117.19, 34.05],
                [-87.63, 41.88],
                [-71.06, 42.36]
            ];
            const map = new Map({
                basemap: "gray"
            });
            const view = new MapView({
                center: [123.9634086609, 35.9595912264],
                container: "viewDiv",
                map: map,
                zoom: 4
            });
            var coverage = document.getElementById("coverageItem");
            //类型选择控件
            view.ui.add(coverage, "top-right");

            var facDiv = document.getElementById("forecastDiv");
            //类型选择控件
            view.ui.add(facDiv, "bottom-left");
            //获取台风离别
            $.ajax({
                url: '${contextPath}/typhoon/TyphoonListJosn.do',
                type: 'get',
                dataType: 'json',
                async: false, //异步
                success: function (jsonData) {
                    console.log(jsonData);
                    var fromUi = "";
                    $.each(jsonData.data, function (index, enit) {
                        var state = "";
                        if (enit.typhoonState == 'stop') {
                            state = "已停编"
                        }
                        var li = "<li><input name='indicators'  type=\"checkbox\"  lay-filter=\"layerData\"  lay-skin=\"primary\" value='" + enit.id + "' title='" + enit.typhoonNumber + enit.typhoonName + enit.typhoonTitle + "(" + state + ")'></li>";
                        fromUi = fromUi + li;
                    });
                    $("#ulTable").append(fromUi);
                    form.render();
                }
            });
            //获取预告

            $.ajax({
                url: '${contextPath}/typhoon/getNewFor.do',
                type: 'get',
                dataType: 'json',
                async: false, //异步
                success: function (jsonData) {
                    console.log(jsonData);
                    $("#for_title").html(jsonData.dataTyphoon.typhoonName); //中文名
                    $("#for_time").html(getTsFormatDate(jsonData.dataFor.forecastTime));
                    $("#for_number").html(jsonData.dataTyphoon.typhoonNumber+"号"+jsonData.dataTyphoon.typhoonTitle);
                    $("#for_lon").html("E"+jsonData.dataFor.forecastLongitude+"°");
                    $("#for_lat").html("E"+jsonData.dataFor.forecastLatitude+"°");
                    $("#for_qy").html(jsonData.dataFor.forecastPressure+"Pa");
                    $("#for_fs").html(jsonData.dataFor.forecastPressure+"m/s");
                }
            });



            form.on('checkbox(layerData)', function (data) {
                $("input[name='indicators']").prop("checked", false);   //全部取消选中
                $(this).prop("checked", true);           //勾选当前选中的选择框     
                form.render('checkbox');
                if (data.elem.checked) {
                    //选中
                    //从后台获取途径数据
                    $.ajax({
                        url: '${contextPath}/typhoon/TyphoonQueryWayJosn.do',
                        type: 'get',
                        data: {"id": data.value},
                        dataType: 'json',
                        async: false, //异步
                        success: function (jsonData) {
                            getWay(jsonData.data, data.elem.title);
                        }
                    });

                }
            });


            function getWay(data, titles) {
                map.removeAll();
                var resultData = [];
                $.each(data, function (index, enit) {
                    var rueltTime = getTsFormatDate(enit.wayTime);
                    var rowDu = {
                        geometry: {
                            type: "point",
                            x: enit.wayLongitude,
                            y: enit.wayLatitude,
                        },
                        attributes: {
                            id: enit.id,
                            title: titles,
                            wayDirection: enit.wayDirection,
                            wayMove: enit.wayMove + "公里/小时",
                            waySpeed: enit.waySpeed + "米/秒",
                            wayTime: rueltTime,
                            wayPressure: enit.wayPressure + "(百帕)",
                            lonlat: enit.wayLatitude + "N/" + enit.wayLongitude + "E",
                        }
                    };
                    resultData.push(rowDu);
                    var layerFrus = new FeatureLayer({
                        source: resultData, // autocast as a Collection of new Graphic()
                        objectIdField: "id",
                        fields: [
                            {
                                name: "id",
                                type: "oid"
                            },
                            {
                                name: "wayDirection",
                                type: "string"
                            }, {
                                name: "wayMove",
                                type: "string"
                            }, {
                                name: "waySpeed",
                                type: "string"
                            }, {
                                name: "wayTime",
                                type: "string"
                            }, {
                                name: "wayPressure",
                                type: "string"
                            }, {
                                name: "lonlat",
                                type: "string"
                            }, {
                                name: "title",
                                type: "string"
                            }
                        ],
                        renderer: {
                            type: "simple",
                            symbol: {
                                type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                                color: "red",
                                size: 5,
                                outline: { // autocasts as new SimpleLineSymbol()
                                    width: 0.3,
                                    color: "#ffffff"
                                }
                            }
                        }
                    });
                    map.add(layerFrus);
                    layerFrus.popupTemplate = {
                        title: "{title}",
                        content: [{
                            type: "fields", // Autocasts as new FieldsContent()
                            // Autocasts as new FieldInfo[]
                            fieldInfos: [
                                {
                                    fieldName: "wayTime",
                                    label: "到达时间",
                                }, {
                                    fieldName: "lonlat",
                                    label: "中心位置",
                                }, {
                                    fieldName: "waySpeed",
                                    label: "风速风力",
                                }, {
                                    fieldName: "wayPressure",
                                    label: "中心气压",
                                }, {
                                    fieldName: "wayMove",
                                    label: "未来移速",
                                }, {
                                    fieldName: "wayDirection",
                                    label: "未来移向",
                                }]
                        }]
                    };

                });
            }
        });

        function getTsFormatDate(timeStamp) {
            var date = new Date(timeStamp);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            var h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            var minute = date.getMinutes();
            var second = date.getSeconds();
            minute = minute < 10 ? ('0' + minute) : minute;
            second = second < 10 ? ('0' + second) : second;

            return y + '-' + m + '-' + d + ' ' + h + ':' + minute ;
        }

    });
</script>
</html>

